<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style type="text/css">
    table tr th,
    table tr td {
        width: calc(100% / 8);
        text-align: center;
    }

    .table-title {
        font-size: 15px;
    }

    .table-head-bg {
        background-color: #F4F4F4;
    }

    .page-content {
        margin: 16px;
    }

    .order-process {
        margin-bottom: 20px;
        border: 1px solid #ddd;
        padding: 16px 0 16px 0;
    }

    .rank-horizontal-list {
        display: flex;
    }

    .rank-horizontal-item {
        width: 20%;
        display: inline-block;
        position: relative;
        text-align: center;
    }

    .order-process .line {
        width: 80%;
        height: 2px;
        position: relative;
        top: 28px;
        margin-left: 10%;
        background-color: #999999;
    }

    .order-process .line .finish {
        height: 2px;
        background-color: #66CC66;
    }

    .order-process .line.line_0 .finish {
        width: 0;
    }

    .order-process .line.line_1 .finish {
        width: 25%;
    }

    .order-process .line.line_2 .finish {
        width: 50%;
    }

    .order-process .line.line_3 .finish {
        width: 75%;
    }

    .order-process .line.line_4 .finish {
        width: 100%;
    }

    .img-container,
    .img-container div {
        height: 50px;
    }

    img {
        width: 50px;
        height: 50px;
        background-color: white;
    }

    .label-container {
        margin: 6px 0 0 0;
    }

    .date-container {
        margin: 6px 0 0 0;
    }

    .label-container span {
        color: black;
        font-size: 16px;
        font-weight: bold;
    }

    .date-container span {
        color: silver;
    }

</style>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <div class="page-content">
        <div class="order-process">
            <div id="line" class="line line_0">
                <div class="finish"></div>
            </div>
            <div id="img" class="img-container rank-horizontal-list">
                <div class="rank-horizontal-item">
                    <img th:src="@{/img/ongoing.png}">
                </div>
                <div class="rank-horizontal-item">
                    <img th:src="@{/img/ongoing.png}">
                </div>
                <div class="rank-horizontal-item">
                    <img th:src="@{/img/ongoing.png}">
                </div>
                <div class="rank-horizontal-item">
                    <img th:src="@{/img/ongoing.png}">
                </div>
                <div class="rank-horizontal-item">
                    <img th:src="@{/img/ongoing.png}">
                </div>
            </div>
            <div class="label-container rank-horizontal-list">
                <div class="rank-horizontal-item">
                    <span>提交订单</span>
                </div>
                <div class="rank-horizontal-item">
                    <span>放款中</span>
                </div>
                <div class="rank-horizontal-item">
                    <span>待还款</span>
                </div>
                <div class="rank-horizontal-item">
                    <span>正在还款</span>
                </div>
                <div class="rank-horizontal-item">
                    <span>已还清</span>
                </div>
            </div>
            <!--<div class="date-container rank-horizontal-list">-->
                <!--<div class="rank-horizontal-item">-->
                    <!--<span>2018-09-25 18:25:33</span>-->
                <!--</div>-->
                <!--<div class="rank-horizontal-item">-->
                    <!--<span>2018-09-25 18:25:33</span>-->
                <!--</div>-->
                <!--<div class="rank-horizontal-item">-->
                    <!--<span>2018-09-25 18:25:33</span>-->
                <!--</div>-->
                <!--<div class="rank-horizontal-item">-->
                    <!--<span>2018-09-25 18:25:33</span>-->
                <!--</div>-->
                <!--<div class="rank-horizontal-item">-->
                    <!--<span>2018-09-25 18:25:33</span>-->
                <!--</div>-->
            <!--</div>-->
        </div>

        <span class="table-title">基本信息</span>
        <table class="table table-bordered">
            <tbody>
            <tr class="table-head-bg">
                <td>订单编号</td>
                <td>下单时间</td>
                <td>借款金额</td>
                <td>借款人</td>
                <td>借款手机号</td>
                <td>收款银行</td>
                <td>收款卡号</td>
            </tr>
            <tr>
                <td>[[${order.orderNumber}]]</td>
                <td>[[${order.orderTime}]]</td>
                <td>¥[[${order.loanAmount}]]</td>
                <td>[[${member.name}]]</td>
                <td>[[${order.mobile}]]</td>
                <td>[[${order.bankName}]]</td>
                <td>[[${order.bankCardNumber}]]</td>
            </tr>
            <tr class="table-head-bg">
                <td>状态</td>
                <td>借款期数</td>
                <td>起止日期</td>
                <td>还款日期</td>
                <td>计息方式</td>
                <td>还款方式</td>
                <td>是否自动还款</td>
            </tr>
            <tr>
                <td>
                    <span th:if="${order.status == 'AUDITING'}">审核中</span>
                    <span th:if="${order.status == 'APPROVED'}">等待放款</span>
                    <span th:if="${order.status == 'REJECTED'}">审核拒绝</span>
                    <span th:if="${order.status == 'CANCELED'}">订单取消</span>
                    <span th:if="${order.status == 'DISBURSING'}">放款中</span>
                    <span th:if="${order.status == 'DISBURSEMENT_FAILED'}">放款失败</span>
                    <span th:if="${order.status == 'ONGOING'}">放款成功</span>
                    <span th:if="${order.status == 'REPAYMENTS'}">待还款</span>
                    <span th:if="${order.status == 'OVERDUE'}">逾期</span>
                    <span th:if="${order.status == 'COMPLETED'}">还款完成</span>
                    <span th:if="${order.status == 'BAD_DEBT'}">坏账</span>
                </td>
                <td>[[${order.orderPeriods}]]</td>
                <td>
                <span th:if="${plans != null && plans.size() >0}">
                    <span style="margin-right: 8px;">[[${plans[0].dueDate}]]</span>/
                    <span style="margin-left: 8px;">[[${plans[plans.size()-1].dueDate}]]</span>
                </span>
                </td>
                <td>每月10号</td>
                <td>等额本息</td>
                <td>按月还本付息</td>
                <td>是</td>
            </tr>
            </tbody>
        </table>

        <span class="table-title">还款计划</span>
        <table class="table table-bordered">
            <thead>
            <tr class="table-head-bg">
                <th>还款期数</th>
                <th>还款日期</th>
                <th>应还金额</th>
                <th>账单状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="plan,iterStat : ${plans}">
                <td th:text="${plan.installmentNo}"></td>
                <td th:text="${plan.dueDate}"></td>
                <td th:text="${plan.dueAmount}"></td>
                <td>
                    <span th:if="${plan.status == 'ONGOING' || plan.status == '' || plan.status == null}">进行中</span>
                    <span th:if="${plan.status == 'PARTIAL_REPAID'}">部分还款</span>
                    <span th:if="${plan.status == 'REPAID'}">已还完</span>
                    <span th:if="${plan.status == 'OVERDUE'}">逾期</span>
                    <span th:if="${plan.status == 'EARLY_SETTLEMENT'}">提前结清</span>
                </td>
                <td th:if="${iterStat.index == 0 }" th:rowspan="${iterStat.size}">
                    <a href="#"
                       th:onclick="'javascript:notice(\''+${order.id}+'\',\''+${order.orderNumber}+'\',\''+${order.memberId}+'\')'"
                       style="font-weight: bold;font-size: 20px;">还款提醒</a>
                </td>
            </tr>
            <tr th:if="${plans == null || plans.size() ==0}">
                <td colspan="5">暂无数据</td>
            </tr>
            </tbody>
        </table>

        <span class="table-title">还款记录</span>
        <table class="table table-bordered">
            <thead>
            <tr class="table-head-bg">
                <th>还款期数</th>
                <th>还款日期</th>
                <th>还款金额</th>
                <th>还款状态</th>
                <th>还款本金</th>
                <th>还款利息</th>
                <th>还款账号</th>
                <th>借款总额/总期数</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="historie,iterStat : ${histories}">
                <td th:text="${historie.installmentNo}"></td>
                <td th:text="${historie.repaymentTime}"></td>
                <td th:text="${historie.repaymentPrincipalAmount + historie.repaymentInterestAmount}"></td>
                <td>
                    <span th:if="${historie.status == 'ONGOING' || historie.status == '' || historie.status == null}">进行中</span>
                    <span th:if="${historie.status == 'TO_HOLD'}">等待调用代扣</span>
                    <span th:if="${historie.status == 'SUCCESS'}">扣款成功</span>
                    <span th:if="${historie.status == 'FAILURE'}">扣款失败</span>
                    <span th:if="${historie.status == 'REFUND'}">转账退款</span>
                </td>
                <td th:text="${historie.repaymentPrincipalAmount}"></td>
                <td th:text="${historie.repaymentInterestAmount}"></td>
                <td>
                    [[${historie.bankName}]]
                    <span th:if="${historie.bankCardNumber != null && historie.bankCardNumber.length() >4}">
						[[${#strings.substring(historie.bankCardNumber,historie.bankCardNumber.length()-4,historie.bankCardNumber.length())}]]
					</span>
                </td>
                <td>
                    [[${order.loanAmount}]]/[[${order.orderPeriods}]]
                </td>
            </tr>
            <tr th:if="${histories == null || histories.size() ==0}">
                <td colspan="8">暂无数据</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript">

    //console.log('order.status = [[${order.status}]]');
    // 初始化订单状态
    if ('[[${order.status}]]') {
        var $line = $('#line');
        var $img = $('#img');
        if ('[[${order.status}]]' === 'AUDITING') {
            //console.log('order.status = 审核中');
            $img.find('img:lt(1)').attr('src', '/img/finish.png')
        } else if ('[[${order.status}]]' === 'APPROVED') {
            //console.log('order.status = 等待放款');
            $img.find('img:lt(1)').attr('src', '/img/finish.png')
        } else if ('[[${order.status}]]' === 'REJECTED') {
            //console.log('order.status = 审核拒绝');
        } else if ('[[${order.status}]]' === 'CANCELED') {
            //console.log('order.status = 订单取消');
        } else if ('[[${order.status}]]' === 'DISBURSING') {
            //console.log('order.status = 放款中');
            $line.removeClass('line_0').addClass('line_1');
            $img.find('img:lt(2)').attr('src', '/img/finish.png')
        } else if ('[[${order.status}]]' === 'DISBURSEMENT_FAILED') {
            //console.log('order.status = 放款失败');
        } else if ('[[${order.status}]]' === 'REPAYMENTS') {
            //console.log('order.status = 放款成功');
            $line.removeClass('line_0').addClass('line_2');
            $img.find('img:lt(3)').attr('src', '/img/finish.png')
        }else if ('[[${order.status}]]' === 'ONGOING') {
            //console.log('order.status = 放款成功');
            $line.removeClass('line_0').addClass('line_2');
            $img.find('img:lt(4)').attr('src', '/img/finish.png')
        } else if ('[[${order.status}]]' === 'OVERDUE') {
            //console.log('order.status = 逾期');
            $line.removeClass('line_0').addClass('line_3');
            $img.find('img:lt(4)').attr('src', '/img/finish.png')
        } else if ('[[${order.status}]]' === 'COMPLETED') {
            //console.log('order.status = 还款完成');
            $line.removeClass('line_0').addClass('line_4');
            $img.find('img:lt(5)').attr('src', '/img/finish.png')
        } else if ('[[${order.status}]]' === 'BAD_DEBT') {
            //console.log('order.status = 坏账');
        } else {
            //console.log('order.status = 未知状态');
        }
    }

    // 还款提醒
    function notice(orderId, orderNumber, memberId) {
        $.modal.open("消息提醒", ctx + "beautyflower/order/notice?id=" + orderId + "&orderNumber=" + orderNumber + "&memberId=" + memberId,420,280);
    }
</script>
</body>
</html>
